<template>
  <div>
    <van-cell is-link @click="showPopup">{{ cellcheckTxt }}</van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapActions } from "vuex";

export default {
  // 接收父组件传递过来的内容
  props: ["cellcheckTxt"],
  data() {
    return {
      show: false,
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(2022, 8, 1),
      currentDate: new Date(1990, 3, 17),
    };
  },
  methods: {
    ...mapActions("li", ["upProfile"]),
    //底部弹框出现
    showPopup() {
      this.show = true;
    },
    //确定
    onConfirm(value) {
      Toast(`当前值：${value}`);
      this.upProfile({ birthday: value.getTime() / 1000 });
      this.show = false;
    },
    //取消
    onCancel() {
      Toast("取消");
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.van-cell {
  border-bottom: 2px solid rgba(187, 187, 187, 100);
  margin: 0 50px;
  font-size: 28px;
  padding: 15px 0;
  width: 650px;
}
.van-cell__right-icon {
  font-size: 22px;
  color: #6f1389;
}
.van-cell__value {
  overflow: visible;
}
</style>